<template>
  <div>

    <div v-if="favoriteList.length==0" style="height: 50px;color: gray">
      <span>您还没有收藏课程哦！</span>
    </div>
    <div v-else class="favorite">
      <div class="course_div" v-for="item in favoriteList" :key="item.id">
        <div class="el-col-6 course_image_div">
          <el-image
            style="width: 100%;height: 100%"
            :src="item.imageUrl"
            fit="contain">
          </el-image>
        </div>
        <div class="el-col-18 course_detail_div">
          <div class="course_title">
            <span>{{item.title}}</span>
          </div>
          <div class="course_detail">
            <div class="el-col-24">
              <span>{{item.hotWord}}</span>
            </div>
          </div>
          <div class="course_divider" >
            <el-divider></el-divider>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :hide-on-single-page="true"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'Favorite',
  data () {
    return {
      page: 1,
      total: 0,
      pageSize: 20,
      favoriteList: []
    }
  },
  computed: mapState({
    user: 'user'
  }),
  mounted () {
    this.getSizeFavorite()
    this.getListFavorite(1, this.pageSize)
  },
  methods: {
    getListFavorite (page, pageSize) {
      var _this = this
      var queryData = {
        page: page,
        pageSize: pageSize,
        userId: this.user.userId
      }
      this.$axios.post('/api/favorite/getListFavorite',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.favoriteList = result.result
          }
        })
    },
    getSizeFavorite () {
      var _this = this
      this.$axios.post('/api/favorite/getSizeFavorite',
        this.$qs.stringify({
          userId: this.user.userId
        })
      )
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.total = parseInt(result.result)
          }
        })
    },
    handleCurrentChange (page) {
      this.page = page
      this.getListFavorite(page, this.pageSize)
    }
  }
}
</script>

<style>
  .favorite .course_div{
    padding: 5px;
    height: 120px;
    width: 100%;
  }
  .favorite .course_image_div {
    width: 180px;
    height: 120px;
    overflow: hidden
  }
  .favorite .course_detail_div{
    height:120px;
    text-align: left;
    padding-left: 20px
  }
  .favorite .course_title{
    padding: 5px 0px;
    font-size: 20px;
    font-weight: bolder;
  }
  .favorite .course_detail{
    font-size: 15px;
    color: #787d82;
  }
  .favorite .course_divider{
    position: relative;
    top: 60px;
  }
</style>
